<template>
  <div class="home">
    <van-nav-bar fixed>
      <template #title>
        <van-button
          icon="search"
          class="van-btn"
          type="primary"
          to="search"
        >搜索</van-button>
      </template>
    </van-nav-bar>

    <van-tabs
      v-model="active"
      class="home-tab"
      swipeable
      animated
    >
      <van-tab
        v-for="item in channels"
        :key="item.id"
        sticky
        offset-top="1.22rem"
        :title="item.name"
      >
        <article-list :channels="item.id" />
      </van-tab>
      <template #nav-right>
        <div class="placeholder-box" />
        <div
          class="rigth-menu"
          @click="pop"
        >
          <i class="toutiao toutiao-gengduo" />
        </div>
      </template>
    </van-tabs>

    <!-- 编辑频道弹出 -->
    <van-popup
      v-model="ispop"
      closeable
      close-icon-position="top-left"
      position="bottom"
      :style="{height:'90%'}"
      class="edit"
    >
      <channel-edit :channels="channels" :active="active" @go="go" @act="active--" />
    </van-popup>
  </div>
</template>

<script>
import { getUserChannel } from '@/api/user.js'
import ArticleList from './compoents/ArticleList.vue'
import ChannelEdit from './compoents/ChannelEdit.vue'
import { getStorage } from '@/utils/storage.js'
export default {
  components: { ArticleList, ChannelEdit },
  data() {
    return {
      active: 0,
      channels: [],
      ispop: false
    }
  },

  created() {
    this.loadUserChannel()
  },

  methods: {
    async loadUserChannel() {
      try {
        const res = getStorage('MY-CHANNELS')
        if (!this.$store.state.user && res) {
          this.channels = res
          return false
        }
        const re = await getUserChannel()
        this.channels = re.channels
      } catch (err) {
        console.log(err)
      }
    },
    pop() {
      // console.log(123)
      this.ispop = true
    },
    go(val) {
      this.active = val
      this.ispop = false
    }
  }
}
</script>
<style scoped lang='less'>
.van-nav-bar {
  background-color: #3296fa;
  // padding: 0 277.5px;
}
.van-btn {
  width: 555px;
  height: 65px;
  background: hsla(0, 0%, 100%, 0.2);
  border-radius: 32px;
  border: none;
}
.van-icon-search {
  color: #fff !important;
}
/deep/.van-nav-bar__title {
  max-width: unset;
}
/deep/.home-tab {
  padding-top: 100px;
  .van-tab {
    min-width: 200px;
    border-right: 1px solid #edeff3;
    height: 82px;
    .van-tab_text {
      font-size: 28px;
      color: #777;
    }
  }
  .van-tabs__line {
    width: 31px;
    height: 6px;
    background-color: #3296fa !important;
    border-radius: 3px;
    bottom: 8px;
  }
  .van-tabs__nav--line {
    padding: 0;
  }
}
van-tabs_wrap {
  height: 82px;
  border-bottom: 1px solid #edeff3;
  .van-tab--active {
    .van-tab_text {
      font-size: 30px;
      color: #333;
    }
  }
}
.rigth-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  right: 0;
  width: 66px;
  height: 82px;
  background-color: #fff;
  i {
    font-size: 40px;
  }
  &::before {
    content: "";
    width: 2px;
    height: 58px;
    position: absolute;
    left: 0;
    top: 12px;
    background-image: url(~@/assets/images/123.png);
    background-size: 100% 100%;
  }
}
.placeholder-box {
  width: 66px;
  flex-shrink: 0;
}
.edit{
  padding-top: 100px;
}
</style>
